<template>
  <div style="position: relative">
    <div class="hbox hbox-auto-xs bg-light" :style="{height:bodyHeight-38+'px'}" id="tree-content">
      <div class="col" :style="{height:bodyHeight-38+'px'}" style="position: fixed">
        <div id="treeDiv">
          <sysColumnTree/>
        </div>
      </div>
      <collapseProductNavbar/>
      <div class="col m-l-200" id="treeContent">
        <div :style="{height:bodyHeight-38+'px'}" v-scrollclick style="overflow-y: auto">
          <sysColumnEdit/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

  import CollapseProductNavbar from '../../../common/collapseProductNavbar.vue'
  import SysColumnTree from './tree.vue'
  import SysColumnEdit from './edit.vue'
  import {COLUMN_MODULE} from '../../../../vuex_/column/columnModule'

  export default{
    computed: {
      bodyHeight(){
        return this.$store.state.bodyHeight;
      },
      bodyWidth(){
        return this.$store.state.bodyWidth;
      }
    },
    created(){
      if (!this.$store.state.columnModule) {
        this.$store.registerModule("columnModule", COLUMN_MODULE)
      }
    },
    components: {
      CollapseProductNavbar, SysColumnTree, SysColumnEdit
    }
  }
</script>
